<template>
<view>
  <!-- 头部 -->
  <view class="header">
    <van-steps :steps="steps" :active="active" inactive-color="#979797" custom-class="van-steps" active-color="background:#00C5C1" desc-class="van-steps-desc"></van-steps>
  </view>

  <!-- 服务特色 -->
  <view class="service">
    <view class="service-features">
      <text class="features-1">服务特色</text>
      <text class="features-2">最多选择10个，前3个显示在个人/店铺的页面标签展示给顾客；</text>
    </view>

    <view class="service-text">
      <text>已选</text>
      <view class="service-movable">
        <view v-for="(item, index) in newTagView" :key="index" class="s123">
          <van-button round type="info" size="mini" custom-class="service-btn" custom-style="background:#E7FFFE;color:#00C5C1;border:1px solid #E7FFFE;font-size:20rpx">{{item.name}}<text style="padding:0 5rpx">X</text></van-button>
        </view>
      </view>
      <block>

      </block>
    </view>

    <view class="van-row">
      <view v-for="(item, index) in tagview" :key="index">
        <van-button type="default" custom-class="van-btn" size="small" @click="onClickBtn" :data-id="item.id" :data-name="item.name" :custom-style="item.id == tagviewid ? 'background:#E7FFFE;border:1px solid #00C5C1;color:#00C5C1' : ''">
          {{item.name}}</van-button>
      </view>
      <van-button custom-class="van-btn" size="small" icon="plus">自定义</van-button>
    </view>
  </view>

  <!--  -->
  <view class="service-line">
  </view>

  <!-- 其他 -->
  <view>
    <view class="van-row">
      <view v-for="(item, index) in tagview1" :key="index">
        <van-button type="default" custom-class="van-btn" size="small" @click="onClickBtn" :data-id="item.id" :data-name="item.name" :custom-style="item.id == tagviewid ? 'background:#E7FFFE;border:1px solid #00C5C1;color:#00C5C1' : ''">
          {{item.name}}</van-button>
      </view>
      <van-button custom-class="van-btn" size="small" icon="plus">自定义</van-button>
    </view>
  </view>

  <!-- 按钮 -->
  <view class="service-buttonbox">
    <view class="service-button">
    <button @click-step @click="onPrevious" class="service-button-1">
      <text>上一步</text>
    </button>
    <button class="service-button-2" @click-step @click="onNext">
      <text>下一步</text>
    </button>
  </view>
  </view>
</view>
</template>

<script>


export default {
  data() {
    return {
      steps: [{
        desc: '品牌介绍'
      }, {
        desc: '服务特色'
      }, {
        desc: '环境设施'
      }],
	  
      active: 1,
	  
      tagview: [{
        name: '全预约制',
        id: 1
      }, {
        name: '头发检测',
        id: 2
      }, {
        name: '免费形象指导',
        id: 3
      }, {
        name: '技术专业',
        id: 4
      }, {
        name: '免费茶点',
        id: 5
      }, {
        name: '免费停车',
        id: 6
      }, {
        name: '免费修眉',
        id: 7
      }, {
        name: '免费按摩',
        id: 8
      }, {
        name: '免费检测',
        id: 9
      }, {
        name: '一对一服务',
        id: 10
      }, {
        name: '没有隐性消费',
        id: 11
      }, {
        name: '无推销',
        id: 12
      }, {
        name: '态度友好',
        id: 13
      }, {
        name: '专车接送',
        id: 14
      }, {
        name: '上门服务',
        id: 15
      }, {
        name: '私密空间',
        id: 16
      }, {
        name: '品牌洗护',
        id: 17
      }, {
        name: '网红打卡',
        id: 18
      }, {
        name: '外宾服务',
        id: 19
      }, {
        name: '工具消毒',
        id: 20
      }, {
        name: '摄影专区',
        id: 21
      }, {
        name: '秘制养生汤',
        id: 22
      }],
      tagviewid: 0,
      newTagView: [
      ],
      tagview1: [{
        name: '不可携带宠物',
        id: 1
      }, {
        name: '服务区不可以抽烟',
        id: 2
      }, {
        name: '不接待外宾',
        id: 3
      }]
    };
  },

  methods: {
    onClickBtn(e) {
      console.log("点击了按钮", e);
      console.log(e.target.dataset);
      let tagitem = this.newTagView;
      let id = e.currentTarget.dataset.id;
	  
	  // 添加到tagitem中
      tagitem.push(e.target.dataset);
      console.log("newTagView>>", this.newTagView);
    },

    // 上一步
    onPrevious() {
      uni.navigateBack({
        url: '../packageA/store_decoration/store_decoration'
      });
    },

    // 下一步
    onNext() {
      uni.navigateTo({
        url: 'url'
      });
    }

  }
};
</script>
<style>
@import "./store_service.css";
</style>